


riot.tag2('sortable', '', '', '', function(opts) {
    var tag = this;
    tag.fn = {};
    tag.on('mount', function(){
      var cfg = {
        group: opts.group,
        sort: (opts.sort || 1) == 0 ? false : true,
        animation: 100,
        onSort: opts.onSort || function(){},
        onEnd: opts.onEnd || function(){},
        onAdd: opts.onAdd || function(){}
      };
      if(pip.typeOf(Sortable) !== 'Function') throw '请加载Sortable模块';
      if(!opts.sortRef) return tag.app.log('请为sortable设置sort-ref属性');
      if(!opts.group) return tag.app.log('请为sortable设置group属性');
      if(opts.dragItem) cfg.draggable = opts.dragItem;
      if(opts.dragHandle) cfg.handle = opts.dragHandle;
      new Sortable(tag.parent.refs[opts.sortRef], cfg);
    });
});


riot.tag2('draggable-modules', '<sortable sort-ref="modules" group="{{name: \'modules\', pull: \'clone\'}}" sort="0" drag-item=".item" on-end="{fn.onEnd}"></sortable> <ul ref="modules"> <li class="item" each="{module in moduleList}"> <div class="icon-{module.name}"></div> <div class="text">{module.text}</div> <div class="display">添加到这里</div> </li> </ul>', 'draggable-modules ul,[data-is="draggable-modules"] ul{} draggable-modules li,[data-is="draggable-modules"] li{display: inline-block; width: 100px; height: 120px; text-align: center; border: 1px solid #ddd; border-radius: 6px; box-shadow: 0 1px 2px rgba(0,0,0,.18); cursor: move; margin-right: 20px; position: relative; background: #fff} draggable-modules li .text,[data-is="draggable-modules"] li .text{position: absolute; bottom: 0; width: 100%; padding: 5px 0;} draggable-modules li .display,[data-is="draggable-modules"] li .display{display: none;} draggable-modules .sortable-ghost,[data-is="draggable-modules"] .sortable-ghost{}', '', function(opts) {
    var tag = this;
    tag.moduleList = [
      {name: 'text', text: '文本'},
      {name: 'pic-text', text: '图+文字'},
      {name: 'hr', text: '分隔线'},
      {name: 'btn', text: '按钮'},
      {name: 'list', text: '列表'}
    ];
    tag.fn = {
      onEnd: function(e){
        tag.emit('dragEnd', tag.moduleList[e.oldIndex]);
      }
    };
    tag.on('mount', function(){});
});



riot.tag2('overlayer', '<div class="bar"> <div class="drag"><i class="icon-move"></i></div> <div class="remove" onclick="{fn.remove}"><i class="icon-trash"></i></div> <div class="edit" onclick="{fn.edit}"><i class="icon-edit-alt"></i></div> </div>', 'overlayer,[data-is="overlayer"]{position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 9;} overlayer:hover,[data-is="overlayer"]:hover{box-shadow: 0 0 0 1px #eee inset;} overlayer .bar,[data-is="overlayer"] .bar{background: #eee; display: none; font-size: 12px; padding: 5px; overflow: hidden; color: #000} overlayer .drag,[data-is="overlayer"] .drag{float: left; cursor: move;} overlayer .edit,[data-is="overlayer"] .edit,overlayer .remove,[data-is="overlayer"] .remove{ float: right; cursor: pointer;} overlayer:hover .bar,[data-is="overlayer"]:hover .bar{display: block; opacity: .8}', '', function(opts) {
    var tag = this;
    tag.fn = {
      edit: function(){
        tag.parent.emit('edit');
      },
      remove: function(){
        tag.parent.emit('remove');
      }
    };
    tag.on('mount', function(){});
});
